<template>
  <div class="header">
    <div class="left">
      <div class="iconfont back-icon">&#xe624;</div>
    </div>
    <div class="header-input">
      <span>&#xe632;</span>
      输入城市/景点/游玩/主题</div>
    <div class="header-right">
      城市
      <span>&#xe64a;</span>
    </div>
  </div>

</template>

<script>
export default {
  name: 'home-header'
}
</script>

<style lang="stylus" scoped>
  .header {
    display: flex;
    line-height: 0.86rem;
    background: #00bcd4;
  }
    .left {
      width: 0.64rem;
      float: left;
    }
      .back-icon {
        text-align center
        font-size .4rem
      }
    .header-input {
      flex: 1
      height .64rem
      line-height .64rem
      margin-top .12rem
      border-radius 0.1rem
      margin-left .2rem
      padding-left .2rem
      background #fff
    }
    .header-right {
      width: 1.24rem;
      float: right;
      text-align center
    }
  // .header
  //   display: flex
  //   height 0.86rem
  //   background #00bcd4
  //   color #ff1111
  //     .left
  //       width .64rem
  //       float left
  //       color #00ff00
  //     .header_inut
  //       flex  1
  //     .header_right
  //       width 1.24rem
  //       float right
</style>
